<template>
  <PageWrapper>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <a-space :size="12">
          <a-button type="primary" @click="openAddTask" v-auth="permissionCodeMap.deployTaskAdd">新增任务</a-button>
        </a-space>
      </template>
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.dataIndex === 'deployEnvir'">
          <span class="global-stop-status" v-if="record.deployEnvir === 0">灰度</span>
          <span class="global-active-status" v-else-if="record.deployEnvir === 1">生产</span>
        </template>
        <template v-else-if="column.dataIndex === 'taskName'">
          <EllipsisTooltip :title="record.taskName + '(' + record.taskDesc + ')'" :width="220">
            {{ record.taskName }} {{ record.taskDesc ? `(${record.taskDesc})` : '' }}
          </EllipsisTooltip>
        </template>
        <template v-else-if="column.dataIndex === 'nameSpace'">
          <EllipsisTooltip :title="record.nameSpace" :width="160">
            <a-tag color="success" class="global-border-radius">{{ record.nameSpace }}</a-tag>
          </EllipsisTooltip>
        </template>
        <template v-else-if="column.dataIndex === 'taskStatus'">
          <span class="global-stop-status" v-if="record.taskStatus === 0">待处理</span>
          <span class="global-wait-status" v-else-if="record.taskStatus === 1">处理中</span>
          <span class="global-active-status" v-else-if="record.taskStatus === 2">部署完成</span>
          <span class="global-error-status" v-else-if="record.taskStatus === 4">部署失败</span>
          <EllipsisTooltip :title="record.failureReason" :width="150">
            {{ record.failureReason }}
          </EllipsisTooltip>
        </template>
        <template v-else-if="column.dataIndex === 'operate'">
          <a-button
            type="link"
            v-auth="permissionCodeMap.deployTaskBack"
            :class="['g-operate-btn', record.taskStatus === 2 ? '' : 'global-disabled-text']"
            @click="openConfirmTask(record)"
          >
            回退
          </a-button>
        </template>
      </template>
    </BasicTable>
    <TaskAdd @register="taskAddRegister" @operateSuccess="operateSuccess" />
    <ConfirmTask @register="taskConfirmRegister" @operateSuccess="operateSuccess" />
  </PageWrapper>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, unref, onMounted } from 'vue'
import PageWrapper from '@/components/PageWrapper/index.vue'
import { BasicTable, useTable } from '@/components/Table'
import { getTaskBasicColumns, getSearchFormConfig, getPackageDataList } from './dataSource'
import { useDrawer } from '@/components/Drawer'
import { useModal } from '@/components/Modal'
import EllipsisTooltip from '@/components/EllipsisTooltip/index.vue'
import TaskAdd from './components/TaskAdd.vue'
import ConfirmTask from './components/ConfirmTask.vue'
import { permissionCodeMap } from '@/utils/permissionCodeMap'
import { operateActionType, operateTxtType, constantMap } from '@/types/enum'
import { NamespacedRecord } from '@/types/deployUpgrade'
import { message } from 'ant-design-vue'
import api from '@/api'
const { findTaskList } = api

const [taskAddRegister, { openDrawer: taskAddOpenDrawer, setDrawerProps }] = useDrawer()
const [taskConfirmRegister, { openModal: taskConfirmOpenModal }] = useModal()

const [registerTable, { reload, setPagination, getForm }] = useTable({
  api: findTaskList,
  columns: getTaskBasicColumns(),
  useSearchForm: true,
  formConfig: getSearchFormConfig(),
  scroll: { y: constantMap.tableYHeight, x: constantMap.tableXWidth }
})

const openAddTask = () => {
  taskAddOpenDrawer(true, {
    packageList: getPackageDataList()
  })
}
const openConfirmTask = (record: any) => {
  if (record.taskStatus === 2) {
    taskConfirmOpenModal(true, { record })
  }
}
// 操作成功回调
const operateSuccess = () => {
  setPagination({
    current: 1
  })
  reload()
}
</script>

<style lang="less" scoped></style>
